<template>
  <div class="order-list-item-wrapper">
    <div class="order-list-item shadow-sm" v-if="items && items.goods && items.goods.length > 0">
      <div class="order-list-header">
        <p class="mb-0 fontSize-14">{{ items.create_time }}</p>
        <p class="mb-0 text-danger fontSize-14">{{items.state_text}}</p>
      </div>
      <div class="order-list-body"  v-for="(goods, index) in items.goods" :key="index">
        <img :src="goods.goods_image" alt="">
        <p class="text-ellipsis mb-0">{{ goods.goods_name }}</p>
        <div class="order-list-pn">
          <div>￥<span>{{goods.goods_price}}</span></div>
          <div>x <span>{{goods.total_num}}</span></div>
        </div>
      </div>
      <div class="order-list-footer">
        <div class="fontSize-16 d-flex justify-content-end">共<span>{{ items.total_num }}</span>件商品，总金额<span>￥{{items.total_price}}</span></div>
        <div class="d-flex justify-content-between align-items-center">
          <div class="text-secondary fontSize-14" @click="handleDetail">查看详情</div>
          <div class="order-list-btn">
            <div v-if="items.order_status === 10">
              <button v-if="items.pay_status === 10" class="btn btn-sm btn-outline-danger" @click="handlePay">立即付款</button>
              <button v-else-if="items.delivery_status === 10" class="btn btn-sm btn-outline-secondary" @click="handleCancel">申请取消</button>
              <button v-else-if="items.delivery_status === 20 || items.delivery_status === 30" class="btn btn-sm btn-outline-danger" @click="confirmReceipt">确认收货</button>
            </div>
            <div v-if="items.order_status === 30">
              <button class="btn btn-sm btn-outline-info" @click="comment">评价</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-empty description="暂无订单" v-else/>
  </div>
</template>

<script>
import { payOrder, cancelOrder, receiptOrder, evaluateOrder } from '@/api/order'
export default {
  name: 'OrderListItem',
  props: {
    items: {
      type: Object,
      default: () => ({})
    },
    actives: {
      type: String,
      default: 'all'
    }
  },
  data () {
    return {
      orderID: this.items.order_id,
      payType: this.items.pay_type || 10,
      localItems: this.items,
      active: this.actives,
      page: 1,
      orderDetailItems: {}
    }
  },
  async created () {
  },
  methods: {
    async handlePay () {
      await payOrder(this.orderID, this.payType)
    },
    handleDetail () {
      this.$router.push({
        name: 'orderdetails',
        query: {
          orderId: this.orderID
        }
      })
    },
    async handleCancel () {
      await cancelOrder(this.orderID)
    },
    async confirmReceipt () {
      await receiptOrder(this.orderID)
      // console.log(res)
    },
    async comment () {
      await evaluateOrder(this.orderID)
      // console.log(res)
    }
  }
}
</script>

<style scoped lang="less">
 .order-list-item{
  display: flex;
  flex-direction: column;
  padding:  0 10px 10px 10px;
  margin: 12px 0 ;
  .order-list-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .order-list-body{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 5px 0;
    img{
      flex: 0;
      width: 100px;
      height: 100%;
      object-fit: cover;
    }
    p{
      padding: 0 10px;
      margin: 10px 0;
      flex: 1;
      font-size: 16px;
    }
    .order-list-pn{
      margin: 12px 0;
      flex: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      font-size: 14px;
      color: #808080;
    }
  }
  .order-list-footer{
    display: flex;
    flex-direction: column;
    .order-list-btn{
      margin: 8px 0 0 0;
      .btn{
        font-size: 14px;
      }
    }
  }
 }
</style>
